<script>
export default {
  name: "l-rate",
  props: {
    /**值*/
    value: {
      type: Number,
      default: 1,
    },
    /**是否只读*/
    readonly: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "28rpx"
    }
  },
  methods: {
    handleClick(index) {
      if (!this.readonly) {
        this.$emit('input', index + 1)
      }
    }
  }
}
</script>

<template>
  <view class="rate">
    <text class="iconfont" v-for="(item,index) in 5" :class="index<value?'icon-favorite-fill':'icon-favorite'"
          @click="handleClick(index)" :style="{fontSize:size}" :key="index"></text>
  </view>
</template>

<style scoped lang="scss">
$rate-color: $color-main;

.rate {
  display: flex;
  align-items: center;

  .iconfont {
    & + .iconfont {
      margin-left: 4rpx;
    }
  }

  .icon-favorite-fill {
    color: $rate-color;
  }
}
</style>